@mixin background-gradient($color1, $color2, $color3) {
  background-image: linear-gradient(90deg, $color1, $color2, $color3);
}
@mixin setTransition($el, $time, $fn) {
  transition: $el $time $fn;
  -moz-transition: $el $time $fn;
  -webkit-transition: $el $time $fn;
}
@mixin positionMiddle() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@mixin scrollBar() {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    outline: none;
    width: 10px;
    height: 10px;
    background-color: #1e1e1e;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    background-color: #1e1e1e;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    background-color: #333333;
  }
  ::-webkit-scrollbar-thumb:hover {
    outline: none;
    background-color: rgba(80, 80, 80, 1);
  }
}

@mixin text-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@mixin texts-ellipsis($lineNumber: 3) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lineNumber;
  -webkit-box-orient: vertical;
}
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}
@mixin animation($name, $time, $delay, $fn, $status) {
  animation: $name $time $delay $fn $status;
  -moz-animation: $name $time $delay $fn $status; /* Firefox */
  -webkit-animation: $name $time $delay $fn $status; /* Safari and Chrome */
  -o-animation: $name $time $delay $fn $status; /* Opera */
}
@mixin phone {
  @media (max-width: 485px) {
    @content;
  }
}
@mixin phone-pad {
  @media (min-width: 485px) and (max-width: 768px) {
    @content;
  }
}
@mixin pad {
  @media (min-width: 768px) and (max-width: 1200px) {
    @content;
  }
}
@mixin pc {
  @media (min-width: 1200px) {
    @content;
  }
}
@mixin landscape {
  @media (orientation: landscape) and (max-width: 768px) {
    @content;
  }
}
@mixin phoneAndPad {
  @media (max-width: 1200px) {
    @content;
  }
}
@mixin belowPad {
  @media (max-width: 768px) {
    @content;
  }
}
@mixin custom($width) {
  @media (max-width: $width) {
    @content;
  }
}
